<template>
  <div
    style="
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    "
  >
    <div
      style="
        position: absolute;
        left: 375px;
        top: 25px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        width: 525px;
        height: 525px;
      "
    >
      <div
        style="width: 25px; height: 25px"
        v-for="(item, index) of 441"
        :style="{
          backgroundColor:
            index % 2 == 0 ? 'rgb(130,130,130)' : 'rgb(120, 120, 120)',
        }"
        :key="'snack' + index"
      ></div>
      <!-- 贪吃蛇盒子 -->
      <div
        id="snackHead"
        style="
          position: fixed;
          left: 788.5px;
          top: 353.8px;
          width: 25px;
          height: 25px;
          background-color: rgb(100, 100, 100);
        "
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1 上 2 右 3 下 4 左
      direction: 1,
      timerStep: null,
      secStep: 1000,
    };
  },
  methods: {
    // 贪吃蛇移动
    snackMove() {
      let that = this;
      that.$nextTick(() => {
        let speed = 25;
        this.timerStep = setInterval(() => {
          let snackHead = document.getElementById("snackHead");
          if (this.direction == 1) {
            let wz = snackHead.style.top.replace("px", "") * 1 - speed;
            if (wz < 103.8) {
              wz = 603.8;
            }
            snackHead.style.top = wz + "px";
          } else if (this.direction == 2) {
            let wz = snackHead.style.left.replace("px", "") * 1 + speed;
            if (wz > 1038) {
              wz = 538;
            }
            snackHead.style.left = wz + "px";
          } else if (this.direction == 3) {
            let wz = snackHead.style.top.replace("px", "") * 1 + speed;
            if (wz > 603.8) {
              wz = 103.8;
            }
            snackHead.style.top = wz + "px";
          } else if (this.direction == 4) {
            let wz = snackHead.style.left.replace("px", "") * 1 - speed;
            if (wz < 538) {
              wz = 1038;
            }
            snackHead.style.left = wz + "px";
          }
        }, that.secStep);

        that.$forceUpdate();
      });
    },
    // 设置方向
    snackGoing() {
      let that = this;
      document.addEventListener("keydown", function (event) {
        if (event.keyCode == 38) {
          that.direction = 1;
        } else if (event.keyCode == 40) {
          that.direction = 3;
        } else if (event.keyCode == 37) {
          that.direction = 4;
        } else if (event.keyCode == 39) {
          that.direction = 2;
        }
      });
    },
  },
  watch: {
    direction: {
      handler(newVal) {
        this.$forceUpdate();
        clearInterval(this.timerStep);
        this.snackMove();
      },
    },
  },
  mounted() {
    this.snackMove();
    this.snackGoing();
  },
  destroyed() {
    clearInterval(this.timerStep);
  },
};
</script>

<style lang="scss" scoped>
</style>